<template>
    <div>
        <h2 style="margin-left: 450px;margin-top: 20px;">添加奖项</h2>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
      style="width: 500px;
      margin-top: 80px;
      margin-left: 210px;"
    >
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="项目名称：" prop="projectname" >
        <el-select v-model="ruleForm.projectname" placeholder="请选择正确项目名称" style="width: 500px;">
          <el-option label="学习竞赛" value="matchStudy" />
          <el-option label="艺术竞赛" value="matchArt" />
          <el-option label="学习证书" value="certificateStudy" />
          <el-option label="艺术证书" value="certificateArt" />
          <el-option label="志愿证书" value="certificateVolunteer" />
          <el-option label="奖学金" value="bonus" />
          <el-option label="项目经历" value="project" />
          <el-option label="实习经历" value="practice" />
          <el-option label="论文发表" value="paper" />
        
        </el-select>
      </el-form-item>
      <el-form-item label="获奖级别：" prop="grade">
        <el-select v-model="ruleForm.grade" placeholder="请选择正确级别" style="width: 500px;">
            <el-option label="国家级" value="国家级" />
          <el-option label="省级" value="省级" />
          <el-option label="校级" value="校级" />
          <el-option label="院级" value="院级" />
        </el-select>
      </el-form-item>
      <el-form-item label="获奖等级：" prop="count" >
        <el-select v-model="ruleForm.count" placeholder="请选择正确获奖等级" style="width: 500px;">
            <el-option label="一等奖" value="国家级" />
          <el-option label="二等奖" value="省级" />
          <el-option label="三等奖" value="校级" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="描述：" prop="details">
        <el-input v-model="ruleForm.details" />
      </el-form-item>
 
     
      <el-form-item style="margin-top: 30px;margin-left: 70px;">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)" style="margin-left: 60px;">清空</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { useRoute } from 'vue-router'



const route = useRoute()
const name = route.query.name

  interface RuleForm {
    name: string
    details:string
    projectname: string
    grade:string
    count: string
 
  }
  
  const formSize = ref('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    name: ''+name,
    projectname: '',
    count: '',
    details:'',
    grade:''
   
  })
  
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 2, max: 15, message: '请输入2-15个字符的正确用户名', trigger: 'blur' },
    ],
    details: [
      { required: true, message: '请输入具体描述', trigger: 'blur' },
      { min: 3, max: 15, message: '请输入5-115个字符的正确描述', trigger: 'blur' },
    ],
    projectname: [
      {
        required: true,
        message: '请选择项目名称',
        trigger: 'change',
      },
    ],
    grade: [
      {
        required: true,
        message: '请选择获奖级别',
        trigger: 'change',
      },
    ],
    count: [
      {
        required: true,
        message: '请选择获奖等级',
        trigger: 'change',
      },
    ],
    
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  
  </script>
  